<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>
		<input type="button" id="btn" value="点我发送json请求" />

	</body>
	<script type="text/javascript">
		var btn = document.getElementById('btn')

		btn.onclick = function() {
			json({
				url: 'http://192.168.0.101:10004/better',
				data: {
					name: "zhangsan",
					age: 20
				},
				success: function(data) {
					console.log(data)
				}
			})
		}

		function json(options) {
			//动态创建scripot标签
			var script = document.createElement('script')
			//拼接字符串的变量
			var params = ''
			for(var attr in options.data) {
				params += '&' + attr + '=' + options.data[attr]
			}
			//为script标签添加src属性
			//我们想办法将它变成全局函数 
			//此时会出现一个问题：因为函数名一样，多次发送请求，会出现覆盖的问题
			//服务器端响应回来的数据会把响应慢的数据覆盖掉
			//解决方案： 函数名需要设置成随机值
			//myJSONP0348939
			var fnName = 'myJSONP' + Math.random().toString().replace('.', '')
			window[fnName] = options.success
			script.src = options.url + '?callback=' + fnName + params
			document.body.appendChild(script)
			script.onload = function() {
				document.body.removeChild(this)
			}
		}
	</script>

</html>